<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" crossorigin="anonymous" type="text/css">
  <link rel="stylesheet" href="../olcs.css" type="text/css">
  <style>
    #map { height: 300px; width: 500px }
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" crossorigin="anonymous"></script>
  <script src="../olcesium.js"></script>
  <!-- In production you should use the minified Cesium for better performances -->
  <script src="https://cdn.jsdelivr.net/npm/cesium@1.81.0/Build/CesiumUnminified/Cesium.js" crossorigin="anonymous"></script>
</head>
<body>
  <p>Old-fashioned example</p>
  <input id="enable" type="button" value="Enable/disable" />
  <div id="map"></div>
</body>
<script>
  var ol2d = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
  });

  var ol3d = new olcs.OLCesium({
    map: ol2d,
  });
  ol3d.setEnabled(true);

  var setEnabled = function() {ol3d.setEnabled(!ol3d.getEnabled())};
  document.getElementById('enable').addEventListener('click', setEnabled);
</script>
</html>
